<template>
  <div>
<!--    搜索框-->
<!--    <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />-->
    <br><br><br>
    <a-form-model :layout="form.layout" :model="form" v-bind="formItemLayout">
      <a-form-model-item label="工单名">
        <a-input v-model="form.name" placeholder="请输入工单分类名" />
      </a-form-model-item>
    </a-form-model>

<!--    工单分类: <input type="text" v-model="name" placeholder="请填写工单分类名"><br><br>-->
    选择分类：
    <select v-model="pid">
      <option value="0">主项目</option>
      <option v-for="i in l_list" :key="i.id" :value="i.id">{{i.name}}</option>
    </select>


    <br> <br>
    <a-button type="primary" @click="submin">提交</a-button>

    <br><br><br>

    <Reply :data="data" />

  </div>
</template>

<script>

import Reply from './Reply.vue';

export default {
  data() {
    return {
      form:{
        layout: "horizontal",
        name: '',
      },
      data: {},
      online: 0,
      z_list: [],
      pid: 0,
      l_list:[],
    }
  },
  components: {
    Reply
  },

  //钩子方法
  mounted: function () {
    this.get_token();
    this.$axios.get('http://127.0.0.1:8000/z/smallworkorder/').then((result) => {
      // console.log(result);
      this.l_list = result.data
      // console.log(this.data);
    });
  },

  //绑定事件
  methods: {
    get_token() {
      this.$axios.get('http://127.0.0.1:8000/z/workorder/').then((result) => {
        // console.log(result);
        this.gd_list = result.data
        this.z_list = result.data
        console.log(result.data)
        var mytree = {'id': 0, name: '123'};
        mytree['childlist'] = result.data;
        this.data = mytree;
        // console.log(this.data);
      });
    },

    // 提交
    submin() {
      this.$axios.post('/z/workorder/', {
        'name': this.form.name,
        'pid': this.pid
      }).then(resp => {
        this.$router.go(0)
      })
    },

  },

  // ant-design文本框
  computed:{
    formItemLayout() {
      const { layout } = this.form;
      return layout === "horizontal"
        ? {
          labelCol: { span: 4 },
          wrapperCol: { span: 14 },
        }
        : {};
    },
  }
}
</script>

<style>

.on {
  background: #cdcbff;
}
.off {
  background: #fefdff;
}

</style>
